<template>
  <nut-popup :visible="visible" position="center" round @click-overlay="handleClose">
    <view class="vip-modal bg-white rounded-[24rpx] p-[40rpx] w-[560rpx]">
      <view class="text-center mb-[20rpx]">
        <text class="text-[36rpx] font-600 text-[#333]">确认提交</text>
      </view>

      <view class="mb-[24rpx] text-center">
        <text class="text-[28rpx] text-[#666]">我已经确认已完成工作，等待发布者确认</text>
      </view>


      <!-- <view class="mb-[24rpx] text-center">
        <text class="text-[28rpx] text-[#666]">是否使用 VIP 次卡抵扣？</text>
      </view>

      <view class="flex items-center justify-between p-[24rpx] bg-[#F8F9FA] rounded-[16rpx] mb-[24rpx]">
        <view class="flex items-center gap-[16rpx]">
          <nut-checkbox v-model="localUseVip" :disabled="cardBalance <= 0">
            <text class="text-[28rpx]">使用 VIP 次卡</text>
          </nut-checkbox>
        </view>
        <view>
          <text class="text-[28rpx] text-[#333]">可用：<text class="text-[#165DFF] font-600">{{ cardBalance }}</text> 次</text>
        </view>
      </view> -->

      <view class="flex gap-[20rpx]">
        <nut-button type="default" class="flex-1" @click="handleClose">取消</nut-button>
        <nut-button type="primary" class="flex-1" @click="handleConfirm">确定</nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'

interface Props {
  visible: boolean
  cardBalance: number
}

interface Emits {
  (e: 'update:visible', v: boolean): void
  (e: 'confirm', payload: { useVip: boolean }): void
  (e: 'cancel'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const localUseVip = ref<boolean>(false)

watch(() => props.visible, (v) => {
  if (v) {
    // 默认选中：如果有可用次数则勾选，否则不选
    localUseVip.value = props.cardBalance > 0
  }
})

const visible = computed({
  get: () => props.visible,
  set: (v: boolean) => emit('update:visible', v)
})

const cardBalance = computed(() => props.cardBalance || 0)

function handleClose() {
  emit('update:visible', false)
  emit('cancel')
}

function handleConfirm() {
  emit('confirm', { useVip: localUseVip.value && cardBalance.value > 0 })
  emit('update:visible', false)
}
</script>

<style scoped>
.vip-modal {
  box-sizing: border-box;
}
</style>


